<template>
    <div>
        <MyLoadingOverlay :loading-overlay="loadingOverlay"></MyLoadingOverlay>
        <my-button-frame>
            <!-- 文件夹操作按钮 -->
            <div class="d-inline-block" style="width: 130px">
                <my-upload-btn @upload-success="getList()"></my-upload-btn>
            </div>
            <div class="d-inline-block" style="width: 180px">
                <my-new-folder-btn @new-success="getList()"></my-new-folder-btn>
            </div>
            <div class="d-inline-block" style="width: 70px">
                <my-download-btn></my-download-btn>
            </div>
            <div class="d-inline-block" style="width: 70px">
                <my-delete-btn @delete-success="getList()"></my-delete-btn>
            </div>
            <div class="d-inline-block" style="width: 85px">
                <my-rename-btn @rename-success="getList()"></my-rename-btn>
            </div>

            <div class="d-inline-block" style="width: 85px">
                <my-move-btn @move-success="getList()" :is-copy="true"></my-move-btn>
            </div>
            <div class="d-inline-block">
                <my-move-btn @move-success="getList()"></my-move-btn>
            </div>
            <div class="d-inline-block float-right" style="width: 445px">
                <v-text-field
                        v-model="search"
                        hide-details
                        outlined
                        label="搜索文件"
                        dense
                        class="mr-8"
                        clearable
                        append-icon="mdi-magnify"
                        @click:append=""
                >
                </v-text-field>
            </div>
        </my-button-frame>
        <my-breadcrumb :list-length="list.length" @update-list="getList()"></my-breadcrumb>
        <my-data-table :list="list" :search="search"></my-data-table>
    </div>
</template>

<script>
    import MyBreadcrumb from "./MyBreadcrumb";
    import MyUploadBtn from "./MyUploadBtn";
    import MyNewFolderBtn from "./MyNewFolderBtn";
    import MyDownloadBtn from "../common/MyDownloadBtn";
    import MyRenameBtn from "../common/MyRenameBtn";
    import MyDeleteBtn from "../common/MyDeleteBtn";
    import MyLoadingOverlay from "../common/MyLoadingOverlay";
    import MyMoveBtn from "./MyMoveBtn";
    import MyButtonFrame from "../common/MyButtonFrame";
    import MyDataTable from "../common/MyDataTable";
    export default {
        name: "All",
        components: {
            MyDataTable,
            MyButtonFrame,
            MyMoveBtn,
            MyDownloadBtn,
            MyUploadBtn,
            MyNewFolderBtn,
            MyBreadcrumb,
            MyRenameBtn,
            MyDeleteBtn,
            MyLoadingOverlay
        },
        mounted() {
            this.getList();
        },
        beforeDestroy() {
            this.$store.commit('setSelected', [])
        },
        data() {
            return {
                list: [],
                search: '',
                selected: [],
                loadingOverlay: false
            }
        },
        methods: {
            getList() {
                let _this = this;
                _this.$store.commit("setSelected", [])
                _this.loadingOverlay = true
                let path = _this.$route.query.path;
                path = path === null || path === undefined ? "/" : path
                _this._get({
                    url: 'system/disk/get-all-list',
                    params: {
                        path: path
                    }
                }).then((rsp) => {
                    if (rsp.data.code === '00000') {
                        this.list = rsp.data.object;
                    } else {
                        this.list = [];
                        _this.$serverError();
                    }
                }).catch((error) => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false
                })
            }
        },
        watch: {
            search: function () {
                this.$store.commit("setSelected", [])
            }
        }
    }
</script>

<style scoped>
</style>